<template>
  <div class="todo-info">
    <span class="total" >{{total}} items lsft</span>
    <div class="tab">
      <!-- <a href="#" class="current">all</a>
      <a href="#">active</a>
      <a href="#">completed</a> -->
      <a
      href="#" 
      :class="state==item?'current':''" 
      v-for="(item, index) in states" 
      :key="index"
      @click.prevent="handleClick(item)">
      {{ item }}
      </a>
    </div>
    <button class="clear" @click="$emit('del-all')">delete All</button>
  </div>
</template>

<script>
export default {
  name: "TodoInfo",
  props:{
    total:{
      type:Number,
      required: true,
    }
  },
  data() {
    return {
      states: ["all", "active", "completed"],
      state:'all',
    };
  },
  methods:{
    handleClick(item){
      this.state=item
      this.$emit('toggles',item)
    },
  }
};
</script>

<style lang="stylus">
@import "~styles/theme.styl";

.todo-info
  display flex
  justify-content: space-between
  align-items center
  height 30px
  padding 5px 15px
  .total
    color:$Floralwhite
  .tab
    display flex
    width 200px
    justify-content: space-around
    a
      padding 5px 10px
      border: 2px solid $ligthgreen
      text-decoration: none
      border-radius: 5px
      color $Floralwhite
      opacity: 0.6
      transition: all 0.5s
      &.current
        background-color $ligthgreen
        color #fff
        opacity: 10
  .clear
    padding 5px 10px
    border: 2px solid $Lightgrey
    background-color $Lightgrey
    color $Floralwhite
    border-radius: 5px
</style>
